<template>
	<view class="user-avatar" :class="avatarClass" @click="handleClick">
		<!-- 头像图片 -->
		<image 
			class="avatar-image" 
			:src="avatarUrl" 
			mode="aspectFill"
			@error="handleImageError"
		/>
		
		<!-- 在线状态指示器 -->
		<view class="online-indicator" v-if="showOnline && isOnline"></view>
		
		<!-- 认证标识 -->
		<view class="verified-badge" v-if="showVerified && isVerified">
			<uni-icons type="checkmarkempty" color="#FFFFFF" size="12" />
		</view>
		
		<!-- 用户信息（可选） -->
		<view class="user-info" v-if="showInfo">
			<text class="user-name">{{ displayName }}</text>
			<text class="user-location" v-if="location">
				<uni-icons type="location" size="12" color="#999999" />
				{{ location }}
			</text>
		</view>
	</view>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'

// Props 定义
interface Props {
	// 用户信息
	avatar?: string
	nickname?: string
	location?: string
	
	// 显示配置
	size?: 'small' | 'medium' | 'large' | 'xlarge'
	shape?: 'circle' | 'square'
	showInfo?: boolean
	showOnline?: boolean
	showVerified?: boolean
	
	// 状态
	isOnline?: boolean
	isVerified?: boolean
	
	// 交互
	clickable?: boolean
	
	// 自定义样式
	customSize?: string
	borderColor?: string
	borderWidth?: string
}

const props = withDefaults(defineProps<Props>(), {
	avatar: '',
	nickname: '',
	location: '',
	size: 'medium',
	shape: 'circle',
	showInfo: false,
	showOnline: false,
	showVerified: false,
	isOnline: false,
	isVerified: false,
	clickable: false,
	customSize: '',
	borderColor: '',
	borderWidth: ''
})

// Emits 定义
interface Emits {
	click: []
}

const emit = defineEmits<Emits>()

// 默认头像
const defaultAvatar = '/static/images/default-avatar.png'

// 头像URL
const avatarUrl = computed(() => {
	return props.avatar || defaultAvatar
})

// 显示名称
const displayName = computed(() => {
	return props.nickname || '未知用户'
})

// 头像样式类
const avatarClass = computed(() => {
	return {
		[`size-${props.size}`]: true,
		[`shape-${props.shape}`]: true,
		'clickable': props.clickable,
		'with-info': props.showInfo,
		'with-border': props.borderColor && props.borderWidth
	}
})

// 自定义样式
const customStyle = computed(() => {
	const style: Record<string, string> = {}
	
	if (props.customSize) {
		style.width = props.customSize
		style.height = props.customSize
	}
	
	if (props.borderColor && props.borderWidth) {
		style.border = `${props.borderWidth} solid ${props.borderColor}`
	}
	
	return style
})

// 处理点击事件
const handleClick = () => {
	if (props.clickable) {
		emit('click')
	}
}

// 处理图片加载错误
const handleImageError = () => {
	console.log('头像加载失败，使用默认头像')
}
</script>

<style lang="scss" scoped>
.user-avatar {
	position: relative;
	display: inline-flex;
	align-items: center;
	transition: transform 0.2s ease;
	
	&.clickable {
		cursor: pointer;
		
		&:active {
			transform: scale(0.95);
		}
	}
	
	&.with-info {
		gap: 15rpx;
	}
	
	// 尺寸变体
	&.size-small {
		.avatar-image {
			width: 60rpx;
			height: 60rpx;
		}
		
		.online-indicator {
			width: 16rpx;
			height: 16rpx;
			bottom: 2rpx;
			right: 2rpx;
		}
		
		.verified-badge {
			width: 24rpx;
			height: 24rpx;
			bottom: -2rpx;
			right: -2rpx;
		}
		
		.user-name {
			font-size: 24rpx;
		}
		
		.user-location {
			font-size: 20rpx;
		}
	}
	
	&.size-medium {
		.avatar-image {
			width: 80rpx;
			height: 80rpx;
		}
		
		.online-indicator {
			width: 20rpx;
			height: 20rpx;
			bottom: 4rpx;
			right: 4rpx;
		}
		
		.verified-badge {
			width: 28rpx;
			height: 28rpx;
			bottom: -2rpx;
			right: -2rpx;
		}
		
		.user-name {
			font-size: 28rpx;
		}
		
		.user-location {
			font-size: 24rpx;
		}
	}
	
	&.size-large {
		.avatar-image {
			width: 120rpx;
			height: 120rpx;
		}
		
		.online-indicator {
			width: 24rpx;
			height: 24rpx;
			bottom: 6rpx;
			right: 6rpx;
		}
		
		.verified-badge {
			width: 32rpx;
			height: 32rpx;
			bottom: -2rpx;
			right: -2rpx;
		}
		
		.user-name {
			font-size: 32rpx;
		}
		
		.user-location {
			font-size: 26rpx;
		}
	}
	
	&.size-xlarge {
		.avatar-image {
			width: 160rpx;
			height: 160rpx;
		}
		
		.online-indicator {
			width: 28rpx;
			height: 28rpx;
			bottom: 8rpx;
			right: 8rpx;
		}
		
		.verified-badge {
			width: 36rpx;
			height: 36rpx;
			bottom: -2rpx;
			right: -2rpx;
		}
		
		.user-name {
			font-size: 36rpx;
		}
		
		.user-location {
			font-size: 28rpx;
		}
	}
	
	// 形状变体
	&.shape-circle {
		.avatar-image {
			border-radius: 50%;
		}
	}
	
	&.shape-square {
		.avatar-image {
			border-radius: 12rpx;
		}
	}
}

.avatar-image {
	position: relative;
	background-color: #F5F5F5;
	transition: all 0.3s ease;
	overflow: hidden;
	
	&:hover {
		filter: brightness(1.1);
	}
}

.online-indicator {
	position: absolute;
	background-color: #07C160;
	border: 3rpx solid #FFFFFF;
	border-radius: 50%;
	box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
}

.verified-badge {
	position: absolute;
	background-color: #1890FF;
	border: 2rpx solid #FFFFFF;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
}

.user-info {
	display: flex;
	flex-direction: column;
	gap: 5rpx;
	min-width: 0;
	flex: 1;
}

.user-name {
	color: #333333;
	font-weight: 500;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.user-location {
	color: #999999;
	display: flex;
	align-items: center;
	gap: 5rpx;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

// 加载状态
.avatar-image {
	&::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
		background-size: 200% 100%;
		animation: loading 1.5s infinite;
		z-index: 1;
	}
	
	&:after {
		content: '';
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 40%;
		height: 40%;
		background-image: url('');
		background-size: contain;
		background-repeat: no-repeat;
		background-position: center;
		z-index: 2;
	}
}

@keyframes loading {
	0% {
		background-position: -200% 0;
	}
	100% {
		background-position: 200% 0;
	}
}

// 响应式适配
@media screen and (max-width: 750rpx) {
	.user-avatar {
		&.size-large {
			.avatar-image {
				width: 100rpx;
				height: 100rpx;
			}
		}
		
		&.size-xlarge {
			.avatar-image {
				width: 140rpx;
				height: 140rpx;
			}
		}
	}
}
</style>